<template>
  <div class="right_main flexC">
    <div class="flex1 colorF">
      <p class="right_title">
        <img class="verticM" style="height: 1.125rem;padding: 0 1rem;" src="../../assets/img/data/20.png" alt="">
        <span class="colorF font_s18">陵园内重点位置实时监控画面</span>
      </p>
      <div class="right_content flexC JustifyContentSA">
        <p class="flex JustifyContentSA">
          <span class="right_content_item">大厅</span>
          <span class="right_content_item item_active">大门口</span>
          <span class="right_content_item">活动室</span>
        </p>
        <p class="flex JustifyContentC"><img src="../../assets/img/organization/06.png" style="width:96%;" alt=""></p>
      </div>
    </div>
    <div class="flex1 colorF">
      <p class="right_title">
        <img class="verticM" style="height: 1.125rem;padding: 0 1rem;" src="../../assets/img/data/20.png" alt="">
        <span class="colorF font_s18">陵园外重点道路实时监控画面</span>
      </p>
      <div class="right_content flexC JustifyContentSA">
        <p class="flex JustifyContentSA">
          <span class="right_content_item">道路一</span>
          <span class="right_content_item">道路二</span>
          <span class="right_content_item">道路三</span>
        </p>
        <p class="flex JustifyContentC"><img src="../../assets/img/organization/06.png" style="width:96%;" alt=""></p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'OrgRight'
}
</script>
<style lang="scss" scoped>
.right_main{
  position: absolute;
  top: 15%;
  right:1rem;
  height: 80%;
  width: 25%;
}
.right_title{
  line-height: 2.75rem;
  border-radius: 5px 5px 0 0;
  background: #556969;
  // box-sizing: border-box;
}
.right_content {
  background: #1C1F26;
  width: 100%;
  height: 88%;
}
.right_content_item {
  width: 5.5625rem;
  line-height: 2.3125rem;
  background: url(../../assets/img/organization/04.png) no-repeat;
  background-size: 100% 100%;
  text-align: center;
  cursor: pointer;
}
.right_content_item:hover {
  width: 10.125rem;
  background: url(../../assets/img/organization/05.png) no-repeat;
  background-size: 100% 100%;
}
</style>
